<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>项目列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/frame/layui/css/layui.css"  media="all">

</head>

<body>
<div class="layui-input-inline" style="width: 100%;height:380px; background-image:url();text-align: center;">
	<button onclick="addOrEditProject('')" class="layui-btn " style="position:absolute;top:75%;left: 46%">添加项目</button>
	<button onclick="logout()" class="layui-btn layui-btn-small layui-btn-danger " style="position:absolute;top:10%;left: 90%">退出登录</button>
	<img width="100%;" height="100%" alt="" src="/image/home.png">
</div>

<div id="projectList" class="layui-input-inline" style="width: 100%;height:350px; text-align: center">
	
	
<!-- 	<div class="layui-input-inline project_class" style="width: 25%;height:220px; ;;margin: 15px 0px 0px 15px;"> -->
<!-- 		<fieldset class="layui-elem-field" style="margin: 10px;"> -->
<!-- 			<div class="layui-input-inline" style="width: 80%;height:20px; ;text-align: center;margin: 5px;"> -->
<!-- 					项目名称 -->
<!-- 			</div> -->
<!-- 			<div class="layui-input-inline x" style="height:25px;width:25px;display: none;cursor:pointer;"> -->
<!-- 					x -->
<!-- 			</div> -->
<!-- 			<div class="layui-input-inline" style="width: 95%;height:100px; ;text-align: center;margin: 5px;word-wrap:break-word; word-break:break-all; overflow: hidden;text-overflow:ellipsis;"> -->
<!-- 					<fieldset class="layui-elem-field"> -->
<!-- 						  <div class="layui-field-box" > -->
<!-- 						 	容内容区域内容内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域 -->
<!-- 						  </div> -->
<!-- 					</fieldset> -->
<!-- 			</div> -->
<!-- 			<div class="layui-input-inline" style="width: 80%;height:35px; ;text-align: center;margin: 5px;"> -->
<!-- 					<button class="layui-btn layui-btn-small">进入控制台</button><button class="layui-btn layui-btn-small">编辑项目</button> -->
<!-- 			</div> -->
<!-- 		</fieldset> -->
<!-- 	</div> -->
	
</div>
</body>

<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
<script src="/frame/layui/lay/dest/layui.all.js" charset="utf-8"></script>
<!-- 模板引擎 -->
<script src="/js/template/template.js" charset="utf-8"></script>
<script src="/js/template/templateUtil.js" charset="utf-8"></script>

<script id="project_tmp" type="text/html">
{{each data as value i}}

<div class="layui-input-inline project_class" style="width: 25%;height:220px; ;text-align: center;margin: 15px 0px 0px 15px;">
<fieldset class="layui-elem-field" style="margin: 10px;">
	<div class="layui-input-inline" style="width: 80%;height:20px; ;text-align: center;margin: 5px;">
			{{fixedLengtSymbolReplace(value.projectName,14,'...',1)}}
	</div>
	<div projectId="{{value.id}}" class="layui-input-inline x" style="height:25px;width:25px;display: none;cursor:pointer;">
			x
	</div>
	<div class="layui-input-inline" style="width: 90%;height:100px; ;text-align: center;margin: 5px;word-wrap:break-word; word-break:break-all; overflow: hidden;text-overflow:ellipsis;">
			<fieldset class="layui-elem-field">
				  <div class="layui-field-box" style="height: 76px;">
				  	{{fixedLengtSymbolReplace(value.description,65,'...',1)}}
				  </div>
			</fieldset>
	</div>
	<div class="layui-input-inline" style="width: 80%;height:35px; ;text-align: center;margin: 5px;">
			<button class="layui-btn layui-btn-normal layui-btn-small" onclick="managerProject('{{value.id}}')">进入控制台</button><button class="layui-btn layui-btn-warm layui-btn-small" onclick="addOrEditProject('{{value.id}}')">编辑项目</button>
	</div>
</fieldset>
</div>

{{/each}}
</script>
<script type="text/javascript">
function logout(){
	location.href="${basePath}/user/logout"
}
function updateProjectList(){
	 $.ajax({
         type: "POST",
         url: "${basePath}/project/getProjectLists",
         dataType: "json",
         success: function(data){
         	if(data.isSuccess){
         		var html = template("project_tmp", data);
        		$("#projectList").html(html);
        		bindEvents();
         	}else{
//          		layer.msg("暂无数据");
         	}
         },
         error: function(data){
        	 layer.msg("网络错误！");
         }
     });
}

updateProjectList();

function delProject(projectId){
	 $.ajax({
         type: "POST",
         url: "${basePath}/project/delProject",
         dataType: "json",
         data:{"projectId":projectId},
         success: function(data){
         	if(data.isSuccess){
         		layer.msg(data.message);
         		updateProjectList();
         	}else{
         		layer.msg(data.message,{time: 3000});
         	}
         },
         error: function(data){
        	 layer.msg("网络错误！");
         }
     });
}
function managerProject(project_id){
	window.location.href="${basePath}/index/indexHome?project_id="+project_id;
}
function bindEvents(){
	$('.project_class').unbind("mousemove");
	$('.project_class').unbind("mouseout");
	$('.project_class .x').unbind("click");
	
	$(".project_class").bind("mousemove",function(){
		$(this).find(".x").show();
	});
	$(".project_class").bind("mouseout",function(){
		$(this).find(".x").hide();
	});
	$(".project_class .x").bind("click",function(){
		var projectId = $(this).attr("projectId");
		layer.confirm('确定要删除吗？', {
			  btn: ['确定','取消'] //按钮
			}, function(){
				delProject(projectId);
			}, function(){
				
			});
	});
	
}
bindEvents();

function addOrEditProject(projectId){
	
	var title = "添加项目";
	if(isNotNull(projectId)){
		title = "编辑项目";
	}
	layui.use('layer', function(){
		layer.open({
			  type: 2,
			  title: title,
			  shadeClose: true,
			  shade: 0.8,
			  area: ['480px', '580px'],
			  content: '${basePath}/project/saveOrEditProject?projectId='+projectId //iframe的url
			  ,end:function(){
				  updateProjectList();
			  }		
		}); 
	});  
}
</script>

</html>